/// TODO: [META-7082] This styling is common to many addons and should be included in either or artdeco macro
/// components or some kind of DataHub shared styles.
/// Gets the item spacing length value from the map $item-spacings
/// @param {Number} @spacing-unit - the type of spacing to retrieve
@function item-spacing($spacing-unit) {
  /// item-spacing maps, defines the spaces between elements in application layout
  /// @type Map
  /// @prop {String} key - number representing a spacing type
  /// @prop {Length} value - pixel length
  $item-spacings: (
    0: 0px,
    1: 4px,
    2: 8px,
    3: 12px,
    4: 16px,
    5: 24px,
    6: 32px,
    7: 48px,
    8: 64px,
    9: 96px
  );

  // If item-spacing is passed a list, for example:
  // padding: item-spacing(1 2 3 4)
  // map item-spacing onto each element in the list and return it.
  @if type-of($spacing-unit) == list {
    $result: ();
    @each $i in $spacing-unit {
      $result: append($result, item-spacing($i));
    }
    @return $result;
  }

  // negative types
  @if ($spacing-unit < 0) {
    @return -1 * map-get($item-spacings, -1 * $spacing-unit);
  }

  @return map-get($item-spacings, $spacing-unit);
}

/// TODO: [META-7082] This styling is common to many addons and should be included in either or artdeco macro
/// components or some kind of DataHub shared styles.
@mixin entity-deprecation-nacho-container {
  border: 1px solid get-color(black, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: item-spacing(4);
  background-color: get-color(white);
  background-clip: padding-box;
  border-radius: 2px;
  transition: box-shadow 83ms;
}

.entity-deprecation {
  // TODO: [META-7082] Change based on note above
  @include entity-deprecation-nacho-container;
  margin: item-spacing(3 0);

  &__actions {
    margin-top: item-spacing(2);
  }

  &__toggle-header {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: item-spacing(3);

    &__label {
      margin: item-spacing(0 2 0 0);
    }
  }

  &__note-editor .ember-medium-editor__container {
    min-height: item-spacing(6) * 4;
    outline: none;
    padding: item-spacing(1);
    background-color: set-color(white, base);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  &__header {
    margin-top: item-spacing(6);
    font-size: 18px;
    font-weight: 500;
  }

  &__decommission-calendar {
    @include ember-power-calendar($cell-size: item-spacing(7), $primary-color: get-color(blue7));
  }

  &__cal-input-trigger {
    padding: item-spacing(1);
  }

  &__cal-dropdown {
    box-shadow: rgba(0, 0, 0, 0.172549) 0 6px 12px 0;
    border: 1px solid get-color(black, 0.3);
  }
}

.entity-decommission-date {
  margin-top: item-spacing(4);

  &--required {
    color: get-color(red5);
  }
}
